<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>忘记密码-${_front_title}</title>
	<meta name="keywords" content="${_front_keywords}" />
    <meta name="description" content="${_front_description}" />
    <meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
    <link rel="shortcut icon" href="/static/favicon.ico" />
    <script type="text/javascript" src="${_front_js}/jquery.min.js"></script>
    <link rel="stylesheet" href="${_front_css}/base.css">
	<link rel="stylesheet" type="text/css" href="/static/front/css/index.css">
	<link rel="stylesheet" type="text/css" href="/static/front/css/base.css">
	<link rel="stylesheet" type="text/css" href="/static/front/css/inpage.css">
    <link rel="stylesheet" type="text/css" href="/static/front/css/main.css">
    
    <link rel="stylesheet" href="${_front_css}/forgetpwd.css">
</head>
<body>
<!-- 头部 开始 -->
	<div id="header">
		<#include "./base/top.ftl" />
	<div>
<!-- 头部 结束 -->
<div class="commonwidth">
	<div class="rigister_title">
        <span class="tit">忘记密码</span>      
    </div>    
    <ul class="reg_icon">
    	<li class="on">
        	<p class="bg">1</p>
            <p class="name">手机号</p>
        </li>
        <li class="on">
        	<p class="bg">2</p>
            <p class="name">找回密码</p>
        </li>
        <li>
        	<p class="bg">3</p>
            <p class="name">密码找回成功</p>
        </li>
    </ul>
    <div class="verifyForm">
    	<div class="pull-left">
			<label><span>*</span>手机号码</label>
			<div style="margin-top: 9px;" id="phone">${phone}</div>
			<div class="fl change_num">
				<a style="float: left;margin-left: 260px;margin-top: -20px;color:#6DBD45" href="/forget">更换手机号</a>
			</div>
		</div>  
    	<div class="pull-left">
   			<label><span>*</span>验证码</label>
        	<input style="width:140px" class="imageVerify" placeholder="请输入验证码" type="text" id="verifyCode" onfocus="clean()"/>
        	<button class="btn-orange-sign time_else" id="codeBtn" style="color: #fff;height: 40px; width: 120px; margin: 0px 0px 0px 10px; background: #6DBD45;border:0px;border-radius:5px;">获取验证码</button>
        	<div id="wrong_one" style="display:inline;height: 40px;color: #E77171;"></div>
       	</div>
    	<div class="pull-left">
    		<label><span>*</span>密码</label>
    		<input type="password" id="password" placeholder="请输入密码" onfocus="clean()";/>
    		<div class="info" id="wrong_two"></div>
   		</div>
   		<div class="pull-left">
    		<label><span>*</span>确认密码</label>
    		<input type="password" id="con-password" placeholder="请输入确认密码"/>
    		<div class="info" id="wrong_three"></div>
   		</div>
    	<div class="login_button">
	        	<a href="javascript:;" class="all-anit next_btn2" id="next_btn2" style="width:233px;"><span style="color:#fff;">提交</span></a>
	    </div>            
    </div>  
</div>
<!-- 底部 开始 -->
	<#include "./base/foot.ftl" />
<!-- 底部 结束 -->
<script type="text/javascript" src="${_front_js}/layer/layer.js" ></script>
<script type="text/javascript" src="${_front_js}/layer/extend/layer.ext.js" ></script> 
<script>
	$(document).ready(function(){
		$(".time_else").attr("disabled", true);
		var date = document.getElementById("codeBtn");
		time(date);
		
	})
	
	 $("#verifyCode").blur(function(){
    	var value=$.trim($(this).val());
		if(value == ""){
    		$("#wrong_one").html("验证码不能为空!");
    		return false;
    	}
		return true;
    })  
    
    $("#password").blur(function(){
    	var value=$.trim($(this).val());
		if(value == ""){
    		$("#wrong_two").html("密码不能为空");
    		return false;
		}else if(value.length<6){
    		$("#wrong_two").html("密码长度必须在6位以上");
    		return false;  	    		
    	}
		return true;
    })  
    
    $("#con-password").blur(function(){
    	var value = $.trim($(this).val());
    	var password = $.trim($("#password").val());
		if(value == ""){
    		$("#wrong_three").html("确认密码不能为空");
    		return false;
		}else if(value.length<6){
    		$("#wrong_three").html("密码长度必须在6位以上");
    		return false;  	    		
    	}else if(password != value){
    		$("#wrong_three").html("两次输入的密码不一致");
    		return false;
    	}
		return true;
    }) 
    
	$("#next_btn2").click(function(){
		$("#verifyCode").blur();
		$("#password").blur();
		$("#con-password").blur();
		var password = $.trim($("#password").val());
		var verifyCode = $.trim($("#verifyCode").val());
		$.ajax({
            cache: true,
            type: "POST",
            url:"/updatePwd",
            data:{
            	"phone" : $("#phone").html(),
	        	"password" : password,
	        	"code" : verifyCode
            },
            async: false,
            success: function(result) {
            	if(result.code == 3){
            		$("#wrong_one").html("验证码错误！");
            	}else if(result.code == -1){
            		layer.alert("操作成功！", function(index){
            				window.location.href = "/complete";
						    layer.close(index);
						});  
            	}
            }
        });    
	});
	
	var wait=60;
	function time(o) {
		if (wait == 0) {
			o.removeAttribute("disabled");  
			$("#codeBtn").css("background","#6DBD45");           
		    $("#codeBtn").html("获取验证码");
		    wait = 60;
		} else {
			o.setAttribute("disabled", true);
			$("#codeBtn").css("background","#666");           
		    $("#codeBtn").html("重新发送(" + wait + ")");
		    wait--;
		    setTimeout(function() {
		        time(o)
		    },
		    1000)
		}
    }
    
    $(".time_else").click(function(){
		var phone = ${phone} ;
		time(this);
		$.ajax({
            cache: true,
            type: "POST",
            url:"/forget",
            data:{
            	"phone" : phone
            },
            async: false,
            success: function(data) {
            	
            }
    	});
    })
    function clean(){
    	$("#wrong_one").html("");
    	$("#wrong_two").html("");
    	$("#wrong_three").html("");
    }
</script>
</body>
</html>
